import React,{ useState,Suspense,lazy } from 'react'
import { Routes, Route ,Link,useRoutes,useNavigate} from "react-router-dom";
import { LaptopOutlined, UnorderedListOutlined,NotificationOutlined, AreaChartOutlined,MenuFoldOutlined,MenuUnfoldOutlined,LeftOutlined,RightOutlined  } from '@ant-design/icons';
import {Divider,Spin,Button} from 'antd'
import { Breadcrumb,Layout ,Menu } from 'antd';
import { FloatButton } from 'antd';
const { Header, Footer, Sider, Content } = Layout;


const ProcessInstanceList = React.lazy(() => import('@/views/ProcessInstanceList.jsx'));
const ProcessDefList = React.lazy(() => import('@/views/ProcessDefList.jsx'));
const TaskList = React.lazy(() => import('@/views/TaskList.jsx'));

const Dashboard = React.lazy(() => import('@/views/Dashboard.jsx'));
const ErrorPage = React.lazy(() => import('@/views/ErrorPage.jsx'));

function App() {

  const [expend,setExpend] = useState(false)


  const routes = useRoutes([
    { path: "/Dashboard", element: <Dashboard /> },
    { path: "/ProcessDefList", element: <ProcessDefList /> },
    { path: "/ProcessInstanceList", element: <ProcessInstanceList /> },
    { path: "/TaskList", element: <TaskList /> },
    { path: "*", element: <ErrorPage /> },
  ]);
 
  const navigate = useNavigate()
  function jump2(){
    navigate('/foo/b?a=thd&b=devil', {
      replace: false,
      state: {x:1, y:2}
    }) 
  }

  function jump(t){
    console.log(t)

    navigate(`/${t.key}`) 
  }

  const menus = [
    {
      key: `Dashboard`,
      icon: <AreaChartOutlined />,
      label: 'Dashboard'
    },
    {
      key: `ProcessDefList`,
      icon: <LaptopOutlined/>,
      label: 'ProcessDefList'
    },
    {
      key: `ProcessInstanceList`,
      icon: <UnorderedListOutlined/>,
      label: 'ProcessInstanceList'
    },
    {
      key: `TaskList`,
      icon: <NotificationOutlined/>,
      label: 'TaskList'
    }
  ]
  const a = "1234"
  return (
    
      
    <Layout>

      <Sider collapsed={expend}  width={200} style={{background:"#fff"}}>
     
     

      <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%' }}
            items={menus}
            onClick={jump}
      />
      </Sider>
      <Content className="site-layout-background">
        {expend?
        <div  style={{padding:8}}> <MenuUnfoldOutlined onClick={()=>{setExpend(false)}} style={{color:"#007bff",cursor:"pointer",fontSize:20}}/></div>
        :
        <div  style={{padding:8}}> <MenuFoldOutlined  onClick={()=>{setExpend(true)}} style={{color:"#007bff",cursor:"pointer",fontSize:20}}/></div>
        }
        
        
     
      
      {/* <Link to="/ProcessDefList">流程定义</Link> <Divider type="vertical"/>
      <Link to="/ProcessInstanceList">流程实例</Link> <Divider type="vertical"/> */}
    
      <div style={{margin:8,padding:8,background:"#fff",borderRadius:"8px"}}>
      <Suspense fallback={<Spin/>}>
      {routes}
        {/* <Routes>
          <Route path="/foo" element={<Foo />} >
            <Route path="a" element={<FooA />} />
            <Route path="b" element={<FooB />} />
            <Route path="*" element={<ErrorPage />} />
          </Route>
          <Route path="/bar" element={<Bar />} />
        </Routes> */}
        </Suspense>
        </div>


        <FloatButton onClick={() => console.log('click')} ></FloatButton>
      </Content>
      
  
  </Layout>


  )
}

export default App
